<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>慧店</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />


        <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
        <script type="text/javascript">
            window.onload = function () {
                //运行瀑布流主函数
                PBL('#wrap', '.box');

                //模拟数据
                var data = [{'src': '1.jpg', 'title': '新款美甲'}, {'src': '2.jpg', 'title': '新款美甲'}, {'src': '3.jpg', 'title': '新款美甲'}, {'src': '4.jpg', 'title': '新款美甲'}, {'src': '5.jpg', 'title': '新款美甲'}, {'src': '6.jpg', 'title': '新款美甲'}, {'src': '7.jpg', 'title': '新款美甲'}, {'src': '8.jpg', 'title': '新款美甲'}, {'src': '9.jpg', 'title': '新款美甲'}, {'src': '10.jpg', 'title': '新款美甲'}];


                //设置滚动加载
                window.onscroll = function () {
                    //校验数据请求
                    if (getCheck()) {
                        var wrap = document.getElementById('wrap');
                        for (var i in data) {
                            //创建box
                            var box = document.createElement('div');
                            box.className = 'box';
                            wrap.appendChild(box);
                            //创建info
                            var info = document.createElement('div');
                            info.className = 'info';
                            box.appendChild(info);
                            //创建pic
                            var pic = document.createElement('div');
                            pic.className = 'pic';
                            info.appendChild(pic);
                            //创建img
                            var img = document.createElement('img');
                            img.src = 'images/' + data[i].src;
                            img.style.height = 'auto';
                            pic.appendChild(img);
                            //创建title
                            var title = document.createElement('div');
                            title.className = 'title';
                            info.appendChild(title);
                            //创建a标记
                            var a = document.createElement('a');
                            a.innerHTML = data[i].title;
                            title.appendChild(a);
                        }
                        PBL('#wrap', '.box');
                    }
                };
            };
            /**
             * 瀑布流主函数
             * @param  wrap	[Str] 外层元素的ID
             * @param  box 	[Str] 每一个box的类名
             */
            function PBL(wrap, box) {
                //	1.获得外层以及每一个box
                var awrap = $(wrap)[0];
                var boxs = $(wrap).find(box);
                //	2.获得屏幕可显示的列数
                var boxW = boxs[0].offsetWidth;
                var colsNum = Math.floor(document.documentElement.clientWidth / boxW);
                awrap.style.width = boxW * colsNum + 'px';//为外层赋值宽度
                //	3.循环出所有的box并按照瀑布流排列
                var everyH = [];//定义一个数组存储每一列的高度
                for (var i = 0; i < boxs.length; i++) {
                    if (i < colsNum) {
                        everyH[i] = boxs[i].offsetHeight;
                    } else {
                        var minH = Math.min.apply(null, everyH);//获得最小的列的高度
                        var minIndex = getIndex(minH, everyH); //获得最小列的索引
                        getStyle(boxs[i], minH, boxs[minIndex].offsetLeft, i);
                        everyH[minIndex] += boxs[i].offsetHeight;//更新最小列的高度
                    }
                }
            }

            /**
             * 获取最小列的索引
             * @param  minH	 [Num] 最小高度
             * @param  everyH [Arr] 所有列高度的数组
             */
            function getIndex(minH, everyH) {
                for (var index in everyH) {
                    if (everyH[index] === minH)
                        return index;
                }
            }
            /**
             * 数据请求检验
             */
            function getCheck() {
                var documentH = document.documentElement.clientHeight;
                var scrollH = document.documentElement.scrollTop || document.body.scrollTop;
                return documentH + scrollH + 300 >= getLastH() ? true : false;
            }
            /**
             * 获得最后一个box所在列的高度
             */
            function getLastH() {
                var boxs = $('#wrap').find('.box');
                return boxs[boxs.length - 1].offsetTop + boxs[boxs.length - 1].offsetHeight;
            }
            /**
             * 设置加载样式
             * @param  box 	[obj] 设置的Box
             * @param  top 	[Num] box的top值
             * @param  left 	[Num] box的left值
             * @param  index [Num] box的第几个
             */
            var getStartNum = 0;//设置请求加载的条数的位置
            function getStyle(box, top, left, index) {
                if (getStartNum >= index)
                    return;
                $(box).css({
                    'position': 'absolute',
                    'top': top,
                    "left": left,
                    "opacity": "0"
                });
                $(box).stop().animate({
                    "opacity": "1"
                }, 999);
                getStartNum = index;//更新请求数据的条数位置
            }
        </script>

    </head>
    <body>
        <div id="wrap">

            <div class="box">
                <div class="info">
                    <div class="pic"><a href="http://www.5icool.org/" target="_blank"><img src="images/1.jpg"></a></div>
                    <div class="title">新款美甲</div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><a href="http://www.5icool.org/" target="_blank"><img src="images/2.jpg"></a></div>
                    <div class="title">新款美甲</div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><a href="http://www.5icool.org/" target="_blank"><img src="images/3.jpg"></a></div>
                    <div class="title">新款美甲</div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="images/4.jpg"></div>
                    <div class="title"><a href="http://www.5icool.org/" target="_blank">新款美甲</a></div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="images/5.jpg"></div>
                    <div class="title"><a href="http://www.5icool.org/" target="_blank">新款美甲</a></div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="images/6.jpg"></div>
                    <div class="title"><a href="http://www.5icool.org/" target="_blank">新款美甲</a></div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="images/7.jpg"></div>
                    <div class="title"><a href="http://www.5icool.org/" target="_blank">新款美甲</a></div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="images/8.jpg"></div>
                    <div class="title"><a href="http://www.5icool.org/" target="_blank">新款美甲</a></div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="images/9.jpg"></div>
                    <div class="title"><a href="http://www.5icool.org/" target="_blank">新款美甲</a></div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="images/10.jpg"></div>
                    <div class="title"><a href="http://www.5icool.org/" target="_blank">新款美甲</a></div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="images/11.jpg"></div>
                    <div class="title"><a href="http://www.5icool.org/" target="_blank">新款美甲</a></div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="images/12.jpg"></div>
                    <div class="title"><a href="http://www.5icool.org/" target="_blank">新款美甲</a></div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="images/13.jpg"></div>
                    <div class="title"><a href="http://www.5icool.org/" target="_blank">新款美甲</a></div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="images/14.jpg"></div>
                    <div class="title"><a href="http://www.5icool.org/" target="_blank">新款美甲</a></div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="images/15.jpg"></div>
                    <div class="title"><a href="http://www.5icool.org/" target="_blank">新款美甲</a></div>
                </div>
            </div>            

        </div>

        <script type="text/javascript"
                src="http://zb.weixin.qq.com/nearbycgi/addcontact/BeaconAddContactJsBridge.js">
        </script>
        <script type="text/javascript">
            BeaconAddContactJsBridge.ready(function () {
                //判断是否关注
                BeaconAddContactJsBridge.invoke('checkAddContactStatus', {}, function (apiResult) {
                    if (apiResult.err_code == 0) {
                        var status = apiResult.data;
                        if (status == 1) {
                            //alert('已关注');
                        } else {
                            //alert('未关注');
                            //跳转到关注页
                            //BeaconAddContactJsBridge.invoke('jumpAddContact');
                        }
                    } else {
                        //alert(apiResult.err_msg);
                    }
                });
            });
        </script>        

    </body>
</html>